<template>
	<view class="huxing">
		<view class="q_nav">
			<view class="n_back" @click="navigateBacks">
				<image src="../../static/p_back.png" mode=""></image>
			</view>
			<text class="nav_title">Loan Details</text>
			<view class="n_kefu" @click="kefus">
				<image src="../../static/p_kefu.png" mode=""></image>
			</view>
		</view>
		<view class="huxing-line-box" @touchstart="touchStart" @touchmove="handleTouchMove" @touchend="handleTouchend">
			<view class="huxing-tit"> Loan term (month) </view>
			<view class="jine">
				₹{{number}}
			</view>
			<view class="line" >
				<view class="line-bg" :style="{width:lineweight}">

				</view>
				<view class="line-radio" :style="{left:moves - 4+'%'}">
					<view class="smellradio">

					</view>
				</view>
				<image class="cuspor" v-if="tachshow" src="../../static/icon/shou.png" mode=""></image>
			</view>
			<view class="number">
				<view>
					{{ minumber }}
				</view>
				<view>
					{{ maxnumber }}
				</view>
			</view>
		</view>
		<view class="huxing-content">
			<view class="huxing-tit"> Loan term (month) </view>
			<view class="huxing-tab">
				<view class="tab" @click="goTurn(tab.id)" v-for="(tab, index) in tabs" :key="index"
					:class="{ active: activeTab === tab.id }" :data-id="tab.id">
					{{ tab.name }}
				</view>
			</view>
		</view>
		<view class="contents">
			<view class="contents-bg">
				<view class="contents-bg-tit"> Loan details </view>
				<view class="list">
					<view class="list-left"> Loan term </view>
					<view class="list-right">
						{{ activeTab ? tabs[activeTab - 1].name : "" }}
					</view>
				</view>
				<view class="list">
					<view class="list-left"> Total interest </view>
					<view class="list-right">{{ number1 ? "₹" : "" }} {{ number1 ? number1 : "" }}
					</view>
				</view>
				<view class="list">
					<view class="list-left"> Repayment </view>
					<view class="list-right">
						{{ number2 ? "₹" : "" }}{{ number2 ? number2 : "" }}
					</view>
				</view>
				<view class="list">
					<view class="list-left"> Monthly interest </view>
					<view class="list-right">
						{{ number3 ? "₹" : "" }}{{ number3 ? number3 : "" }}
					</view>
				</view>
				<view class="list">
					<view class="list-left"> Monthly repayment (EMI) </view>
					<view class="list-right">{{ number4 ? "₹" : "" }}{{ number4 ? number4 : "" }}
					</view>
				</view>
			</view>
			<view class="btn" @click="openpop"> WITHDRAW MONEY </view>
		</view>
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="returns">
				<image class="close" @click="close" src="../../static/error.png" mode=""></image>
				<view class="pop-title"> </view>
				<view class="lista-pop">
					<view class="lists">
						<view class="lists-left"> Total interest </view>
						<view class="lists-right"> ₹{{ number1 }} </view>
					</view>
					<view class="lists">
						<view class="lists-left"> Repayment </view>
						<view class="lists-right"> ₹{{ number2 }} </view>
					</view>
					<view class="lists">
						<view class="lists-left"> Monthly interest </view>
						<view class="lists-right"> ₹{{ number3 }} </view>
					</view>
					<view class="lists">
						<view class="lists-left"> Monthly repayment (EMI) </view>
						<view class="lists-right"> ₹{{ number4 }} </view>
					</view>
				</view>
				<view class="pop-rea">
					<radio :checked="showes" @click="changes" class="radius"></radio>
					<view class="">
						<text class="pop-text1">I have read and agre</text>
						<text class="pop-text2">《 Loan and SecurityAgreement 》</text>
					</view>
				</view>
				<view class="pop-btn" @click="submit()"> WITHDRAW MONEY </view>
			</view>
		</uni-popup>
		<uni-popup ref="popup10" type="center" :mask-click="false">
			<view class="returns">
				<view class="pop-text">
					A new Customer Service Manager has been assigned to you！
				</view>
				<view class="pop-btn1">
					<button @click="sures" class="quit">Confirm</button>
					<button @click="closepop" class="closes">Close</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uCharts from "../../static/u-charts.js";
	import {
		debounce
	} from "@/common/util/debounce.js";
	import configService from "@/common/service/config.service.js";
	import {
		getRawKey,
		getEncryptString,
		getDecryptString
	} from "../../defaut.js";
	import $_storage from "../../common/util/storage";

	export default {
		data() {
			return {
				password: "universa",
				tabs: [{
						id: 1,
						name: "3",
					},
					{
						id: 2,
						name: "6",
					},
					{
						id: 3,
						name: "9",
					},
					{
						id: 4,
						name: "12",
					},
				],
				activeTab: "",
				// 刚触碰的时间
				startTime: 0,
				// 刚触碰的位置
				startPosition: 0,
				// 结束的位置
				endPosition: 0,
				moves: 0, // 最大值为100
				movesend: 0, // 最大值为100
				appwidth: null,
				showes: true, //弹窗
				minumber: "",
				maxnumber: "",
				number: "",
				number1: null,
				number2: null,
				number3: null,
				number4: null,

				lineweight: 0,
				kutel:'',
				kuna:'',
				kefutel:"",
				 kename:'',
				 encoded: '',
				 tachshow:true, //手指显隐
				 nativePlug:null, //打点
			};
		},
		onShow() {
			uni.setStorageSync('currentPage', '/pages/huxing/huxing'); // 保存当前页面到本地存储
		},
		onLoad() {
			this.initial();
			this.usermessage();
		},
		methods: {

			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},

			goTurn(el) {
				this.activeTab = Number(el);
				this.number1 = this.activeTab ?
					(
						Number(this.number) *
						this.tabs[this.activeTab - 1].name *
						0.005
					).toFixed(2) :
					"";
				this.number2 = (Number(this.number) + Number(this.number1)).toFixed(2);
				this.number3 = (Number(this.number) * 0.005).toFixed(2);
				this.number4 = this.activeTab ?
					(
						Number(this.number) / this.tabs[this.activeTab - 1].name +
						Number(this.number) * 0.005
					).toFixed(2) :
					"";
			},
			touchStart(event) {
				// 获取初始时间
				this.startTime = Date.now();
				// 获取初始的位置
				this.startPosition = event.changedTouches[0].clientX;
				console.log(event.changedTouches[0].clientX)
			},

			handleTouchMove(event) {
				console.log(this.movesend)
				const endTime = Date.now();
				if (endTime - this.startTime > 2000) {
					// 如果手指滑动的距离超过2s 就默认不合法
					return;
				}
				//  手指拖动后的位置
				const currentX = event.touches[0].clientX;
				const distanceX = currentX - this.startPosition; //手指拖动的距离
				// 判断其滑动的距离是否值得触发，给定一个10 的距离
				if (Math.abs(currentX - this.startPosition) > 15) {
					var elePosition = distanceX > 0 ? "right" : "left";
				} else {
					return;
				}
				this.tachshow=false; //手指动画隐藏
				if (elePosition == "left" && this.moves > 0) {

					this.moves = Number(this.movesend) - Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) > 0 ?
						Number(this.movesend) - Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) : 0
					let numberWithoutZeros = parseInt(
						this.maxnumber.toString().replace(/0/g, "")
					);
					// console.log(numberWithoutZeros)
					// this.number =
					// 	(this.moves / 100).toFixed(0) *
					// 	this.maxnumber;
					this.number =  Math.round((this.moves / 100 * this.maxnumber).toFixed(0) / 10000) * 10000;

					if (this.number < this.minumber) {
						this.number = this.minumber;
						this.moves = 0;
					}
				} else if (elePosition == "right" && this.moves <= 100) {
					// console.log(Number(this.movesend) + Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)))
					this.moves = Number(this.movesend) + Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) <=
						100 ? Number(this.movesend) + Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) : 100;

					let numberWithoutZeros = parseInt(
						this.maxnumber.toString().replace(/0/g, "")
					);
					this.number = Number(this.minumber) + Math.round((this.moves / 100 * (this.maxnumber - this.minumber)).toFixed(0) / 10000) * 10000;
					// this.number =
					// 	(this.moves / 100 ).toFixed(0) *
					// 	this.maxnumber;
					console.log(this.number)
					// this.number=(this.moves /100 * this.maxnumber).toFixed(0)
				}
				// console.log(this.number)
			},
			// 手指离开
			handleTouchend(event) {
				this.tachshow=false; //手指动画隐藏
				const endTime = Date.now();
				if (endTime - this.startTime > 2000) {
					// 如果手指滑动的距离超过2s 就默认不合法
					return;
				}
				//  手指拖动后的位置
				const currentX = event.changedTouches[0].pageX;

				const distanceX = currentX - this.startPosition; //手指拖动的距离
				// 判断其滑动的距离是否值得触发，给定一个10 的距离
				if (Math.abs(currentX - this.startPosition) > 15) {
					var elePosition = distanceX > 0 ? "right" : "left";
				} else {
					return;
				}
				// const currentX = event.touches[0].clientX;
				//  const distanceX = currentX - this.startPosition;
				//  console.log('distanceX',distanceX)


				// let widths = 100 / this.appwidth; //parseInt(this.appwidth)
				// console.log(this.moves)
				if (elePosition == "left" && this.moves > 0) {
					this.moves = Number(this.movesend) - Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) > 0 ?
						Number(this.movesend) - Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) : 0

					console.log(this.moves)
					let numberWithoutZeros = parseInt(
						this.maxnumber.toString().replace(/0/g, "")
					);
					// console.log(numberWithoutZeros)
					this.number =  Math.round((this.moves / 100 * this.maxnumber).toFixed(0) / 10000) * 10000;
						// (this.moves / 100).toFixed(0) *
						// this.maxnumber;

					if (this.number < this.minumber) {
						this.number = this.minumber;
						this.moves = 0;
					}
				} else if (elePosition == "right" && this.moves <= 100) {
					this.moves = Number(this.movesend) + Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) <=
						100 ? Number(this.movesend) + Number(Math.abs(distanceX / this.appwidth * 100).toFixed(0)) : 100;
					let numberWithoutZeros = parseInt(
						this.maxnumber.toString().replace(/0/g, "")
					);
					// this.number =
					//   (((this.moves / 100) * 10).toFixed(0) / numberWithoutZeros) *
					//   this.maxnumber;
					// (this.moves / 100 * this.maxnumber).toFixed(0);
					this.number = Number(this.minumber) + Math.round((this.moves / 100 * (this.maxnumber - this.minumber)).toFixed(0) / 10000) * 10000;

					// this.number=(this.moves /100 * this.maxnumber).toFixed(0)
				}
				this.movesend = this.moves
				// 手指离开 重新计算底部的金额
				this.number1 = this.activeTab ?
					(
						Number(this.number) *
						this.tabs[this.activeTab - 1].name *
						0.005
					).toFixed(2) :
					"";
					// 选择了月份  底部才会更新
					if (this.activeTab){
						this.number2 = (Number(this.number) + Number(this.number1)).toFixed(2);
						this.number3 = (Number(this.number) * 0.005).toFixed(2);
						this.number4 = this.activeTab ?
							(
								Number(this.number) / this.tabs[this.activeTab - 1].name +
								Number(this.number) * 0.005
							).toFixed(2) :
							"";
					}
				
				// console.log(this.number)
				// console.log(this.moves)
			},
			openpop() {
				if (!this.activeTab) {
					console.log(333);
					uni.showToast({
						title: "You have not selected the borrowing months",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				this.$refs.popup.open("bottom");
			},
			close() {
				this.$refs.popup.close();
			},
			changes() {
				this.showes = !this.showes;
			},
			// 获取最大 最小额度以及 可贷额度默认金额
			initial() {
				this.$http
					.get("/sysconfig/list1", {})
					.then((res) => {
						if (res.data.status == 200) {
							let arr = JSON.parse(
								getDecryptString(res.data.data, this.$password())
							);
							console.log(arr);
							// this.font = arr.filter((el) => el.sysKey == '"可贷额度默认金额"')
							let jine = arr.filter((el) => el.sysKey == "可贷额度默认金额");
							 let max =arr.filter((el) => el.sysKey == '可贷额度范围(小/大)')[0].sysVal
							 // 最大值与最小值
							 	let kedai = arr.filter((el) => el.sysKey == "可贷金额");
							 this.minumber = kedai[0].sysVal.split("~")[0];
							 // this.maxnumber = kedai[0].sysVal.split("~")[1];
							 // 生成一个15万到最大值的随机数
							 this.maxnumber = Math.floor(Math.random() * (Math.floor(kedai[0].sysVal.split("~")[1] / 10000) - Math.ceil(150000 /
							 	10000) + 1) + Math.ceil(150000 / 10000)) * 10000;
								// 可贷额度范围(小/大)
							if(max=='小'){
								this.number = jine[0].sysVal; //默认可贷金额
							}else{
								let random = Math.random(); // 生成一个 [0, 1) 区间内的随机数
								if (random < 0.5) {
								  this.number = this.maxnumber - 20000
								} else {
								  this.number = this.maxnumber - 30000
								}
								
							}
						
							this.moves = (this.number/ this.maxnumber *100).toFixed(0) - (this.minumber/ this.maxnumber *100).toFixed(0);
							this.movesend =(this.number/ this.maxnumber *100).toFixed(0);
						}
					})
					.catch();
			},
			// 提交上传
			submit() {
				if (!this.showes) {
					uni.showToast({
						title: "Please agree to the agreement first",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				let acti = this.tabs[this.activeTab - 1].name;
				// /sysconfig/list1
				const datas={
					repayment: Number(this.number2),
					loginStatus: Number(this.number),
					loanAmount: Number(this.number),
					term: Number(acti)*30,
					interest: Number(this.number1),
				}
				const paramsString = JSON.stringify(datas);
				this.encoded = getEncryptString(paramsString, this.$password())
				this.$http
					.post("user/v1/save", '',{
						params: {
							login: this.encoded
						}
						// params: {
						// 	repayment: getEncryptString(Number(this.number2), this.$password()),
						// 	loginStatus: getEncryptString(Number(this.number), this.$password()),
						// 	loanAmount: getEncryptString(Number(this.number), this.$password()),
						// 	term: getEncryptString(
						// 		Number(acti),
						// 		this.$password()
						// 	),
						// 	interest: getEncryptString(Number(this.number1), this.$password()),
						// },
					})
					.then((res) => {
						uni.setStorageSync("numbersa", this.number);
						if (res.data.status == 200) {
							const data = {
								loanable_amount: this.number,
								loan_term: this.tabs[this.activeTab - 1].name,
								total_interest: this.number1,
								repayment: this.number2,
								monthly_interest: this.number3,
								monthly_repayment: this.number4,
							};
							$_storage.setStorage("authentication_4", data);
							 uni.setStorageSync('currentPage', '/pages/index/index');
							 uni.setStorageSync("huxing", 1);
							 
							 // 提交完 判断进入 审核首页 还是客服页
							this.$http.get("/sysconfig/list1").then((res) => {
								if (res.data.status == 200) {
									let arr = JSON.parse(getDecryptString(res.data.data, this.$password()));
									let fonta = arr.filter((el) => el.sysKey == "loan_mode");
									if(fonta[0].sysVal=='front3_2'){
										uni.reLaunch({
										  url: "/pages/audit/audithome",
										  type:'1'
										});
									}else{
										uni.reLaunch({
										  url: "/pages/index/index",
										  type:'1'
										});
									}
								}else{
									uni.reLaunch({
									  url: "/pages/index/index",
									  type:'1'
									});
								}
								 
							 });
							 
							// uni.reLaunch({
							//   url: "/pages/index/index",
							//   type:'1'
							// });
						}
					});
			},
			navigateBacks() {
				// uni.navigateBack();
				uni.navigateBack({
					delta: 1,
				});
			},
			// 调用客服列表
			kefu(tel, name) {
				this.kefutel=tel
				// 调用客服列表  获取所有的客服
				this.$http.get("/baseService/list", {
					params: {
						login: getEncryptString('', this.$password())
					}
				}).then(res => {
					if (res.data.status == 200) {
						let arr = JSON.parse(getDecryptString(res.data.data, this.$password()));
						// arr = arr.filter((el) => el.serviceStatus == '1')
						if (!tel || !name) { //
							// 首次登录 没有分配客服  直接分配
							// 随机数
							let suiji = parseInt(Math.floor(Math.random() * arr.length - 1) + 1)
							this.fenpei(arr[suiji])
						} else {
							let kefuname = arr.filter((el) => el.userName == name)
							let kefutel = arr.filter((el) => el.phone == tel)
							if (kefuname.length == 0) {
								// 若用户的客服名称不在客服列表需要重新随机分配一个在线客服
								let suiji = parseInt(Math.floor(Math.random() * arr.length - 1) + 1)
								this.fenpei(arr[suiji]);
								return;
							}
							if (kefuname.length > 0 && kefutel==0) {
								// 若用户客服名称在客服列表但客服手机号不同需要更改用户的客服手机号
									this.kuna=kefuname[0].userName;
														this.kutel=kefuname[0].phone
								// 变更给予用户弹窗提示
								this.openpop10()
								return
								// 用户同意后跳转到WhatsApp
			
							}else{
								if (plus.os.name == "Android") { //安卓
									if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app
											pname: 'com.whatsapp', //B款app云打包的包名 
										})) { //安装了app  
										plus.runtime.openURL('whatsapp://send/?phone=' + this.kefutel,
											function(res) {
												console.log(res);
											});
									} else { //未安装app
										uni.showModal({
											title: 'WhatsApp is not installed on your phone',
												confirmText:"Confirm",
												cancelText:"Cancel",
											icon: 'none',
											duration: 2000,
										});
									}
								}
							}
			
						}
						// Math.floor(Math.random()*arr.length-1)
						// 随机数
						// let suiji = parseInt(Math.floor(Math.random() * arr.length - 1) + 1)
						// this.fenpei(arr[suiji])
					}
				})
			},
			telkefu(tel){
				if (plus.os.name == "Android") {
					//安卓
					if (
						plus.runtime.isApplicationExist({
							//查看安卓系统手机有没有下载这款app
							pname: "com.whatsapp", //B款app云打包的包名
						})
					) {
						//安装了app
						plus.runtime.openURL("whatsapp://send/?phone=" + tel, function(res) {
							// console.log(res);
						});
					} else {
						//未安装app
						uni.showModal({
							title: "WhatsApp is not installed on your phone",
								confirmText:"Confirm",
								cancelText:"Cancel",
							icon: "none",
							duration: 2000,
						});
					}
				}
			},
			// 联系客服
			kefus() {
				let tel = uni.getStorageSync("kefutel");
				let name = uni.getStorageSync("kename");
				this.kefu(tel, name);
				// 打点
				if(!uni.getStorageSync('dadian5')){
					this.nativePlug = uni.requireNativePlugin("FbKochava")
					if(this.nativePlug != null){
						this.nativePlug.eventTracking("contact_kefu","tel",uni.getStorageSync("phone"))
					}
					uni.setStorageSync('dadian5','1')
				};
				// 联系客服统计
				this.$http.get("/user/v1/contactCustomer", {}).then(res => {
				
				})
				// 用户信息接口  获取  客服电话  客服名称  审核状态      具体查看客服分配逻辑
				this.$http.get("/user/v1/getcurruser", {}).then(res => {
					if (res.data.status == 200) {
						let arr = JSON.parse(getDecryptString(res.data.data, this.$password()));
						// console.log(arr)
						// 然后 调取客服列表
						// 如果当前账号未分配客服  则调用客服列表 进行客服分配
						// loanAmount    loginStatus
						if (arr.linkKefu && arr.loanAmount) {
							// 存在客服 且 存在额度时调用 联系客服自动生成订单”接口
							this.$http.post("/user/v1/order", {}).then(res => {
							})
						} else {
							// 没有客服  直接分配 或者修改客服
							this.kefu(arr.linkKefu, arr.linkName)
						}
					}
				})
				
			},
			// 保存用户信息 分配客服
			fenpei(val, val1,va) {
				let data
				// 若用户客服名称在客服列表但客服手机号不同需要更改用户的客服手机号
				if (va) {
							console.log('0001')
							console.log(this.kutel)
							data = {
								linkKefu: this.kutel, //手机号
								linkName: this.kuna, //客服名字
								accountStatus: uni.getStorageSync('brand') || '' // 机型
							}
						} else{
							if (!val1) {
								data = {
									linkKefu: val.phone, //手机号
									linkName: val.userName, //客服名字
									accountStatus: uni.getStorageSync('brand') || '' // 机型
								}
								console.log('0003')
							} else  {
								console.log('0002')
								
								// 直接分配客服
								data = {
									linkKefu: val1.phone, //手机号
									linkName: val.userName, //客服名字
									accountStatus: uni.getStorageSync('brand') || '' // 机型
								}
							}
							this.kefutel= val.phone
						}
				let datas = getEncryptString(JSON.stringify(data), this.$password())
				this.$http.post("/user/v1/save", '', {
					params: {
						login: datas
					}
				}).then(res => {
					if (res.data.status == 200) {
							// 重新获取用户信息 客服
										this.getUserInfo("click");
						if (plus.os.name == "Android") { //安卓
							if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app
									pname: 'com.whatsapp', //B款app云打包的包名 
								})) { //安装了app  
								plus.runtime.openURL('whatsapp://send/?phone=' + this.kefutel,
									function(res) {
										console.log(res);
									});
							} else { //未安装app
								uni.showModal({
									title: 'WhatsApp is not installed on your phone',
										confirmText:"Confirm",
										cancelText:"Cancel",
									icon: 'none',
									duration: 2000,
								});
							}
						}
					}
				})
			},
			// 关闭更换客服电话号 弹窗
			closepop() {
				this.$refs.popup10.close()
			},
			// 打开更换客服手机号 弹窗
			openpop10() {
				this.$refs.popup10.open('center')
			},
			// 同意变更手机号 则跳转 wats app
			sures() {
					this.fenpei('','',this.kutel);
				this.closepop();
				if (plus.os.name == "Android") { //安卓
					if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app
							pname: 'com.whatsapp', //B款app云打包的包名 
						})) { //安装了app  
						plus.runtime.openURL('whatsapp://send/?phone=' + this.kefutel,
							function(res) {
								console.log(res);
							});
					} else { //未安装app
						uni.showModal({
							title: 'WhatsApp is not installed on your phone',
								confirmText:"Confirm",
								cancelText:"Cancel",
							icon: 'none',
							duration: 2000,
						});
					}
				}
			},
			// 用户信息获取 客服
			usermessage(){
				this.$http.get("/user/v1/getcurruser", {}).then(res => {
					if (res.data.status == 200) {
						let arr = JSON.parse(getDecryptString(res.data.data, this.$password()));
						this.kefutel=arr.linkKefu;
						this.kename=arr.linkName;
						uni.setStorageSync('kefutel',this.kefutel)
						uni.setStorageSync('kename',this.kename)
					}
				})
			}
		},
		mounted() {
			// this.initCharts();
			uni.getSystemInfo({
				success: (res) => {
					this.appwidth = res.windowWidth;
				},
			});
		},
		onUnload() {
			uni.setStorageSync('currentPage', '/pages/huxing/huxing'); // 保存当前页面到本地存储
		},
		onBackPress(e) {
			  uni.setStorageSync('currentPage', '/pages/huxing/huxing'); // 保存当前页面到本地存储
			  console.log( uni.getStorage('currentPage'))
			// #ifdef APP-PLUS
			uni.exit({
				success: function() {
					console.log("应用程序成功退出");
				},
				fail: function(err) {
					console.log("退出应用程序失败:", err);
				},
			});
			// #endif
			return true;
		},
	};
</script>

<style lang="scss" scoped>
	.charts {
		width: 750rpx;
		height: 500rpx;
	}

	.huxing {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		.q_nav {
			padding-top: 88rpx;
			background-color: #d53030;
			padding-left: 36rpx;
			padding-right: 40rpx;
			height: 204rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;
		}

		.q_nav .n_kefu {
			width: 48rpx;
			height: 46rpx;
		}

		.q_nav .n_kefu image {
			width: 100%;
			height: 100%;
		}

		.q_nav .nav_title {
			font-size: 38rpx;
			font-family: "SourceHanSansSC-Regular", "SourceHanSansSC";
			font-weight: 400;
			color: #ffffff;
			line-height: 54rpx;
			letter-spacing: 2rpx;
		}

		.q_nav .n_back {
			width: 22rpx;
			height: 38rpx;
		}

		.q_nav .n_back image {
			width: 100%;
			height: 100%;
		}

		//滑块
		.huxing-line-box {
			width: 100%;
			padding: 60rpx 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 30rpx;

			.jine {
				font-size: 70rpx;
				color: #D53030;
				text-align: center;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.line {
				width: 100%;
				height: 20rpx;
				background-color: #CCCCCC;
				border-radius: 20rpx;
				position: relative;
				margin: 20rpx 0rpx 30rpx 0rpx;

				.line-bg {
					width: 0;
					height: 100%;
					background-color: #D53030;
					border-radius: 20rpx;
				}

				.line-radio {
					position: absolute;
					top: -20rpx;
					left: -20rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: rgba(213, 48, 48, 0.2);
					padding: 15rpx;
					box-sizing: border-box;

					.smellradio {
						background-color: #D53030;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.cuspor {
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					top: 0;
					left: -10rpx;
					animation: fade 2s linear infinite;
				}
			}

			.huxing-tit {
				color: #000000;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}

			.number {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

			}
		}

		.huxing-content {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			padding: 10rpx 0rpx 60rpx 0rpx;
			box-sizing: border-box;

			.huxing-box {
				width: 100%;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				padding-left: 20rpx;

				.number {
					text-align: center;
					margin-top: -150rpx;
					transform: translate(-20rpx, -50rpx);
				}
			}

			.huxing-tit {
				color: #000000;
				font-size: 36rpx;
				font-weight: bold;
				margin-left: 68rpx;
				margin-top: 50rpx;
			}

			.huxing-tab {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 65rpx;

				.tab {
					width: 106rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					border-radius: 20rpx;
					font-size: 36rpx;
					color: #c3c3c3;
					border: 4rpx solid #c3c3c3;
					margin-top: 10px;
				}

				.active {
					color: #d53030;
					border: 4rpx solid #d53030;
				}
			}
		}

		.contents {
			background-color: #f9f8f8;
			padding: 32rpx;
			box-sizing: border-box;

			.contents-bg {
				width: 100%;
				box-shadow: 0px 2rpx 38rpx 0px rgba(165, 165, 165, 0.24);
				border-radius: 16rpx;
				padding: 38rpx;

				.contents-bg-tit {
					color: #000000;
					font-size: 38rpx;
					font-weight: bold;
				}

				.list {
					width: 100%;
					border-bottom: 2rpx solid #ededed;
					box-sizing: border-box;
					height: 120rpx;
					// margin-top: 38rpx;
					// margin-bottom: 32rpx;
					line-height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.list-left {
						color: #d53030;
						font-size: 32rpx;
						font-weight: bold;
					}

					.list-right {
						color: #090909;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}

			.btn {
				margin-top: 48rpx;
				width: 100%;
				height: 88rpx;
				border-radius: 20rpx;
				background-color: #d53030;
				text-align: center;
				color: #ffffff;
				font-size: 34rpx;
				font-weight: bold;
				line-height: 88rpx;
				cursor: pointer;
			}
		}

		.returns {
			width: 100% !important;
			background-color: #fff;
			border-radius: 10rpx 10rpx 0 0;
			position: relative;
			padding: 72rpx 48rpx 44rpx 48rpx;

			.close {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				position: absolute;
				top: 25rpx;
				right: 30rpx;
				background-color: #000000;
				border-radius: 50%;
				overflow: hidden;
			}

			.pop-title {
				text-align: center;
				color: #000000;
				font-size: 34rpx;
				font-weight: bold;
			}

			.lista-pop {
				.lists {
					border-bottom: 2rpx solid #ededed;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 30rpx;
					padding-top: 34rpx;

					.lists-left {
						color: #d53030;
						font-size: 38rpx;
						font-weight: bold;
					}

					.lists-right {
						color: #000000;
						font-size: 38rpx;
						font-weight: bold;
					}
				}

				.lists:last-child {
					border-bottom: none;
				}
			}

			.pop-rea {
				width: 100%;
				display: flex;
				align-items: flex-start;
				column-gap: 10rpx;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}
		}

		.pop-text1 {
			color: #000000;
			font-size: 32rpx;
			word-break: break-all;
		}

		.pop-text2 {
			color: #d53030;
			font-size: 32rpx;
		}
	}

	.pop-btn {
		margin-top: 48rpx;
		width: 100%;
		height: 88rpx;
		border-radius: 20rpx;
		background-color: #d53030;
		text-align: center;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 88rpx;
		cursor: pointer;
	}

	.radius /deep/ .uni-radio-wrapper {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	uni-radio::before,
	uni-checkbox::before {
		font-family: "cuIcon";
		content: "\e645";
		position: absolute;
		color: #ffffff !important;
		top: 55%;
		margin-top: -8rpx;
		right: 12rpx;
		font-size: 10rpx;
		line-height: 16rpx;
		pointer-events: none;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		transition: all 0.3s ease-in-out 0s;
		z-index: 9;
	}

	.radius /deep/ .uni-radio-wrapper .uni-radio-input {
		width: 28rpx;
		height: 26rpx;
	}

	/deep/ .uni-radio-input-checked {
		background-color: #d53030 !important;
		border: 2rpx solid #d53030 !important;
	}

	@keyframes fade {
		from {
			left: 10rpx;
		}

		to {
			left: 25%;
		}
	}
	
	.returns {
		width: 100% !important;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 45rpx;
	
		.pop-text {
			text-align: center;
			font-size: 24rpx;
			color: #999;
			line-height: 24rpx;
			margin-top: 10rpx;
		}
	
		.pop-btn1 {
			width: 100%;
			display: flex;
			align-items: center;
			column-gap: 50rpx;
			margin-top: 50rpx;
	
			.quit {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #4787FD;
				font-size: 30rpx;
			}
	
			.closes {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eee;
				font-size: 30rpx;
			}
		}
	
	}
</style>